<template>
	<view class="container" v-if="isshow">
		<el-row v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-divider>{{header1[type]}}</el-divider>
			<!-- 主体盒子 -->
			<view v-if="world" class="container-box">
				<block v-for="(item,index) in type==0?dataList:dataList3">
					<view class="container-box-item"
						style="width: 180px; background-color: #ebebeb; display: flex;align-items: center;padding: 10px;border-radius: 5px;justify-content: space-between;">
						<el-image style="width: 60px; height: 60px; border-radius: 10px;margin-right: 10px;"
							:src="item.url" fit="fit" :lazy="true"></el-image>
						<view class="" style="text-align: center;flex: 1;">
							<view class="" style="font-size: 30rpx;font-weight: bold;margin-bottom: 10px;">
								{{item.name }}
							</view>
							<Master-menu :selectType="item.selectType" :selectData="item.selectData"
								:command="item.command" @itemSelect="itemSelect">
							</Master-menu>
						</view>
					</view>
				</block>
				<el-divider>{{header2[type]}}</el-divider>
				<block v-for="(item,index) in type==0?dataList2:dataList4">
					
					<view class="container-box-item"
						style="width: 180px; background-color: #ebebeb; display: flex;align-items: center;padding: 10px;border-radius: 5px;justify-content: space-between;">
						<el-image style="width: 60px; height: 60px; border-radius: 10px;margin-right: 10px;"
							:src="item.url" fit="fit" :lazy="true"></el-image>
						<view class="" style="text-align: center;flex: 1;">
							<view class="" style="font-size: 30rpx;font-weight: bold;margin-bottom: 10px;">
								{{ item.name }}
							</view>
							<Master-menu :selectType="item.selectType" :selectData="item.selectData"
								:command="item.command" @itemSelect="itemSelect">
							</Master-menu>
						</view>
					</view>
				</block>
			</view>
		</el-row>
	</view>
</template>

<script>
	import MasterMenu from '../Master-menu/Master-menu.vue'
	import './MasterData.js';
	export default {
		name: 'Master',
		props: {
			type: {
				type: [String, Number],
				default: 0
			},
			world: {
				type: Map
			}
		},
		components: {
			MasterMenu
		},
		data() {
			return {
				isshow: true,
				loading: false,
				header1: ["【地面】【世界选项】", "【洞穴】【世界选项】"],
				header2: ["【地面】【世界生成】（以下选项重置世界才会生效）", "【洞穴】【世界生成】（以下选项重置世界才会生效）"],
				dataList: dataList,
				dataList2: dataList2,
				dataList3: dataList3,
				dataList4: dataList4,
			}
		},
		created() {
			this.$forceUpdate();
			console.log(this.dataList);
			console.log(this.dataList1);
		},
		methods: {
			itemSelect(val, inx) {
				this.world.set(val, inx);
				this.$emit('getWorld', val, inx)
			},
		},
		watch: {
			world: {
				handler(n) {
					if (this.type == 0) {
						this.dataList.forEach(item => {
							item.command = n.get(item.selectType)
						})
						this.dataList2.forEach(item => {
							item.command = n.get(item.selectType)
						})
					} else {
						this.dataList3.forEach(item => {
							item.command = n.get(item.selectType)
						})
						this.dataList4.forEach(item => {
							item.command = n.get(item.selectType)
						})
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: auto;

		.container-box {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.container-box-item {
				width: 300px;
				margin: 0 10px 10px 0;
			}
		}
	}
</style>